<template>
  <Main>
    <div class="depart-tree">
      <el-tabs
        tab-position="left"
        v-model="categoryId"
        style="height: 100%"
        @tab-click="handleNodeClick"
      >
        <el-tab-pane
          v-for="(item, index) in LeftTableData"
          :key="index"
          :label="item.type"
          :name="item.objectId"
          class="el-tabs__nav-scroll"
        ></el-tab-pane>
      </el-tabs>
    </div>
    <div class="right">
      <el-button type="primary" @click="add()" size="small" icon="el-icon-plus">新建流程</el-button>
      <el-table
        :empty-text="emptyText"
        :data="tableData"
        style="width: 100%"
        row-key="objectId"
        default-expand-all
        :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
      >
        <el-table-column fixed prop="id" label="模型ID"></el-table-column>
        <el-table-column prop="name" label="模板名称"></el-table-column>
        <el-table-column prop="key" label="key"></el-table-column>
        <el-table-column prop="version" label="版本"></el-table-column>
        <el-table-column prop="deploymentId" label="部署ID"></el-table-column>
        <el-table-column prop="createTime" label="新建时间" :formatter="timeFormat"></el-table-column>
        <el-table-column prop fixed="right" label="表单操作">
          <template slot-scope="scope">
            <el-button type="primary" size="small" @click="openForm(scope.row.id)">表单管理</el-button>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="基本操作">
          <template slot-scope="scope">
            <el-tooltip class="item itema" effect="dark" content="查看流程图" placement="top-start">
              <el-popover placement="right" trigger="click" style="padding-right:10px">
                <img :src="lookImg(scope.row.id)" />
                <el-button slot="reference" type="primary" size="small">
                  <i class="el-icon-view"></i>
                </el-button>
              </el-popover>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="删除" placement="top-start">
              <el-button size="small" @click="del(scope.row.id)">
                <i class="el-icon-delete"></i>
              </el-button>
            </el-tooltip>
          </template>
        </el-table-column>
         <el-table-column fixed="right" label="流程设计">
          <template slot-scope="scope">
            <el-tooltip class="item" effect="dark" content="流程设计" placement="top-start">
              <el-button type="primary" size="small" @click="edit(scope.row.id)">
                <i class="el-icon-edit"></i>
              </el-button>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作">
          <template slot-scope="scope">
            <el-tooltip class="item" effect="dark" content="部署" placement="top-start">
              <el-button type="primary" size="small" @click="modelDeploy(scope.row.id)">
                <i class="el-icon-rank"></i>
              </el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <page
        :page="formInline.current"
        :limit="formInline.size"
        :total="formInline.total"
        @change="changePage"
      ></page>
    </div>
  </Main>
</template>

<script>
import Main from "@/components/basic-container/main";
import page from "@/components/basic-page/page";
import { activeUrl } from "@/config/env";
const urls = {
  rigltList: activeUrl + "/modelListPage",
  leftList: activeUrl + "/category/category/list",
  create: activeUrl + "/create",
  edit: activeUrl + "/modeler.html?modelId=",
  delete: activeUrl + "/deleteModel",
  deploy: activeUrl + "/deploy",
  imgPath: activeUrl + "/model/getImg?modelId="
};
export default {
  methods: {
    sortChange(column, prop, order) {
      var order = {
        asc: column.order == "ascending",
        column: column.prop
      };
      var orders = [];
      orders.push(order);
      this.formInline.orders = orders;
      this.rightFetch();
    },
    changePage(val) {
      this.formInline.current = val;
      this.rightFetch();
    },
    openForm(modelId) {
      // 打开表单管理
      this.$router.push({
        path: "/d25e15d08b762a8b8aed4923f248090e//e7659f624aaf9173aa0e4adf88e88c56",
        query: { modelId: modelId }
      });
    },
    lookImg(modelId) {
      // 显示流程图
      return urls.imgPath + modelId  + '&' + new Date();
    },
    modelDeploy(modelId) {
      // 部署
      this.$confirm("确认要部署该模板吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        axios.get(urls.deploy, { params: { modelId: modelId } }).then(res => {
          this.$message(res.data.result);
          this.rightFetch();
        });
      });
    },
    add: function() {
      //新建模板
      const url = urls.create + "?category_id=" + this.categoryId;
      const openWin = window.open(url);
      this.checkClose(openWin);
    },
    edit: function(modelId) {
      // 修改模板
      const url = urls.edit + modelId;
      const openWin = window.open(url);
      this.checkClose(openWin);
    },
    checkClose(openWin) {
      // 监听模板
      var _this = this;
      var loop = setInterval(function() {
        if (openWin.closed) {
          clearInterval(loop);
          _this.rightFetch();
        }
      });
    },
    del: function(modelId) {
      // 删除模板
      this.$confirm("确认要删除该模板吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        axios.get(urls.delete, { params: { modelId: modelId } }).then(res => {
          this.$message(res.data.result);
          this.rightFetch();
        });
      });
    },
    timeFormat(row, column) {
      // 工作流时间格式化
      return new Date(+new Date(row.createTime) + 8 * 3600 * 1000)
        .toISOString()
        .replace(/T/g, " ")
        .replace(/\.[\d]{3}Z/, "");
    },
    fetch(categoryId) {
      // 分类初始化
      axios.get(urls.leftList).then(res => {
        const data = res.data.result;
        this.LeftTableData = data;
        this.categoryId = categoryId ? categoryId : data[0].objectId;
        this.rightFetch();
      });
    },
    rightFetch() {
      // 模板初始化
      this.formInline.category_id = this.categoryId;
      axios.get(urls.rigltList, { params: this.formInline }).then(res => {
        const data = res.data.result;
        this.tableData = data.records;
        this.emptyText = "暂无数据";
        this.formInline.current = data.current;
        this.formInline.size = data.size;
        this.formInline.total = data.total;
      });
    },
    handleNodeClick(e) {
      // 分类点击
      this.categoryId = e.name;
      this.rightFetch();
    }
  },
  mounted() {
    this.$forceUpdate()
    this.fetch();
  },
  data() {
    return {
      tableData: [],
      LeftTableData: [],
      categoryId: null,
      formInline: {
        name: "",
        current: 1, // 当前页
        size: 10, // 每页条数
        total: 0, // 总条数
        orders: [] // 排序
      },
      emptyText: "加载中"
    };
  },
  components: {
    Main,
    page
  }
};
</script>
<style scoped>
.depart-tree {
  position: absolute;
  background: #fff;
  width: 10%;
  top: 50px;
  left: 6px;
  bottom: 0px;
  overflow-y: scroll;
}
.right {
  background: #fff;
  width: 90%;
  position: absolute;
  right: 6px;
  height: 92%;
  overflow-y: auto;
}
.user-list {
  position: absolute;
  background: #fff;
  padding: 20px;
  top: 50px;
  left: 270px;
  right: 0;
  bottom: 0px;
}
.middle {
  position: absolute;
  z-index: 88;
  top: 40px;
  left: 250px;
  width: 30px;
  height: 100%;
  background: #f0f2f5;
}
/deep/ .el-tabs__nav-scroll {
  width: 115px !important;
  padding-top: 20px;
}
/deep/ .itema {
  margin-left: 10px;
}
/deep/ .el-tabs--left .el-tabs__nav-wrap.is-left::after,
.el-tabs--left .el-tabs__nav-wrap.is-right::after,
.el-tabs--right .el-tabs__nav-wrap.is-left::after,
.el-tabs--right .el-tabs__nav-wrap.is-right::after {
  top: 25px;
}
</style>